<template>
  <div id="EarlyWarning">
    <van-tabs>
      <van-tab :key="key" v-for="(tab,key) in tabs" :title="tab.title">
        <van-search
          v-model="keywords"
          placeholder="请输入搜索关键词"
          show-action
        />
        <ul class="c-list">
          <li class="c-list__item" v-for="i in 10" :key="i">
            <section class="list-data">
              <em class="list-data__text list-data__text--strong">张三</em>
              <em class="list-data__text">（123456199901011234 )</em>
            </section>
            <section class="list-data">
              <em class="list-data__text">征信值：</em>
              <em class="list-data__text list-data__text--primary">45</em>
              <em class="list-data__text">2019-09期</em>
            </section>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>

</template>

<script>
  const tabs = [{title: "个人征信值预警"}, {title: "2019-09期"}, {title: "不限企业类型"},];
  export default {
    name: "EarlyWarning",
    data() {
      return {tabs, keywords: null}
    },
    methods: {},
    computed: {},
    onShow() {
    }
  }
</script>

<style scoped lang="scss">
  #EarlyWarning {
    .c-list {
      padding: 10px;
      border-radius: 3px;
      &__item {
        background: rgba(242, 242, 242, 1);
        padding: 10px 8px;
        margin-bottom: 10px;
      }
      .list-data {
        display: flex;
        &:first-child {
          margin-bottom: 12px;
        }
        &__text {
          font-size: 14px;
          &--strong {
            font-size: 16px;
            font-weight: bold;
          }
          &--primary {
            margin-left: 10px;
            color: #306eff;
          }
          &:last-child {
            margin-left: auto;
          }
        }
      }
    }
  }
</style>
